<template>
  <div class="user-info-box flex-col-start">
    <el-descriptions :column="1" :labelStyle="{width:'150px'}" border class="user-info-body" title="我的信息">
      <template slot="extra">
        <el-button size="small" type="primary">操作</el-button>
      </template>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          我的头像
        </template>
        <div class="flex-row-start">
          <el-avatar :size="150" :src="user.avatar" style="border: 2px solid black;margin-right: 50px"></el-avatar>
          <MiUpload></MiUpload>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户昵称
        </template>
        <AlterableLabel :label="user.userNick"></AlterableLabel>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        <AlterableLabel :label="user.userName"></AlterableLabel>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          密码
        </template>
        ************
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ user.phone }}
        <el-button v-show="!user.phone" class="menu-btn" size="mini" type="primary">绑定</el-button>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱
        </template>
        {{ user.email }}
        <el-button v-show="!user.email" class="menu-btn" size="mini" type="primary">绑定</el-button>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          最新修改时间
        </template>
        {{ formatDate(user.lastModify) }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          创建时间
        </template>
        {{ formatDate(user.createTime) }}
      </el-descriptions-item>

    </el-descriptions>

  </div>
</template>

<script>
import {formatDate} from "../../../util/DateUtil";
import AlterableLabel from "@/components/label/AlterableLabel.vue";
import MiUpload from "@/components/Upload/MiUpload.vue";


export default {
  name: "UserInfo",
  components: {MiUpload, AlterableLabel},
  data() {
    return {
      user: {
        userNick: "",
        userName: "",
        email: "",
        phone: "",
        avatar: "",
        createTime: "",
        lastModify: ""
      }
    }
  },
  methods: {
    formatDate,
    initUserInfo() {
      let usr = this.$store.state.userOption.user;
      if (usr) {
        this.user = usr
      }
    }
  },
  created() {
    this.initUserInfo()
  }
}
</script>

<style lang="less" scoped>
.user-info-box {
  padding-bottom: 100px;

  .user-info-body {
    width: 90%;
  }

  .menu-btn {
    float: right;
    right: 5px;
  }
}
</style>